<template>
  <div class="user-container">
    <div class="top-operation">
      <PlayButton :songs="songs" />
      <CommonButton
        icon="&#xe617;"
        name="批量操作"
        @click="emits('openSelect', true)"
      />
    </div>
    <SongTable
      :songs="songs"
      :song-id-mapper="songIdMapper"
      :page-size="pageSize"
    />
    <Pagination
      v-show="pageSize < total"
      :cur-page="curPage"
      :page-size="pageSize"
      :total="total"
      @page-change="pageChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive } from 'vue'
import { storeToRefs } from 'pinia'
import useUserStore from '@/store/user'
import { elMessageType } from '@/model/enum'
import { elMessage } from '@/utils'
import { Song } from '@/model'
import SongTable from '@components/table/song-table/index.vue'
import PlayButton from '@components/button/play-button/index.vue'
import CommonButton from '@components/button/common-button/index.vue'
import Pagination from '@components/pagination'

// 获取用户播放数据
const user = useUserStore()
const { musicDownload, loveSongs, songRecord } = storeToRefs(user)

const props = defineProps<{
  pageName: string
}>()

const emits = defineEmits<{
  (e: 'openSelect', showSelect: boolean): void
}>()

// 根据页面传递的参数加载歌曲
const target = computed(() => {
  let songs = reactive<Song[]>([])
  if (props.pageName == 'LoveView') {
    songs = loveSongs.value
  } else if (props.pageName == 'RecentPlayView') {
    songs = songRecord.value
  } else {
    songs = musicDownload.value
  }
  return songs
})
// 歌曲id与Index的映射
const songIdMapper = computed(
  () => new Map(target.value.map((item, index) => [item.id, index]))
)

// 用于分页
// 当前页数
const curPage = ref<number>(1)
// 一页多少数据
const pageSize = ref<number>(40)
// 歌曲
const songs = computed(() => {
  return target.value.slice(
    (curPage.value - 1) * pageSize.value,
    curPage.value * pageSize.value
  )
})
// 总的数据数
const total = computed(() => target.value.length)
// 页数变化
const pageChange = (page: number) => {
  curPage.value = page
}
</script>

<style lang="less" scoped>
.user-container {
  .pagination-container {
    margin: 10px 0;
  }
  .top-operation {
    margin: 15px 0 15px 10px;
    position: relative;
    .el-button {
      font-size: 13px;
      width: 125px !important;
    }

    .search-area,
    .sort-btn {
      position: absolute;
      top: 0;
    }

    .search-area {
      right: 110px;
    }
    .sort-btn {
      right: 40px;
      top: 2px;
    }
  }
}
</style>
